<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>v-pre</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-pre>Vue</h2>
        <h2>当前的n值是<span v-text="n"></span></h2>
        <!-- <h2>放大10倍后n的值是<span v-big-number="n"></span></h2> -->
        <h2>放大10倍后n的值是<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>
    <div id="root2">
        <input type="text" v-fbind:value="x">
    </div>
</body>
<!--   JS   -->
    <script>
    //定义全局指令
   /*  Vue.directive('fbind',{
                    //指令与元素成功绑定时
                    bind(element,binding){
                        console.log('bind')
                        element.value = binding.value
                    },
                    //指令所在元素被插入页面时
                    insert(){
                        console.log('insert')
                        element.focus()
                    },
                    //指令所在模板被重新解析时
                    update(){
                        console.log('update')
                        element.value = binding.value
                    }
                }) */
        Vue.directive('big',function(element,binding){
            console.log('big',this)//this时window
            element.innerText = binding.value * 10
        })
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            directives:{
                //何时调用：1.指令与元素成功绑定时（刚开始），2.指令所在的模板被重新解析时
                /* big(element,binding){
                    console.log('big',this)//this时window
                    element.innerText = binding.value * 10
                }, */
                /* 'big-number':function(element,binding){
                    console.log('big')
                    element.innerText = binding.value * 10
                }, */
                fbind:{
                    //指令与元素成功绑定时
                    bind(){
                        console.log('bind')
                        element.value = binding.value
                    },
                    //指令所在元素被插入页面时
                    insert(){
                        console.log('insert')
                        element.focus()
                    },
                    //指令所在模板被重新解析时
                    update(){
                        console.log('update')
                        element.value = binding.value
                    }

                }
            }
        })
        new Vue({
            el:'#root2',
            data:{
                x:1
            }
        }) 
    </script>
</html>